<template>
  <div class="page-model absolute absolute-fill">
    <div v-if="!logDetailsShow">
      <input type="text" class="aimind-hidden-input">
      <input type="password" class="aimind-hidden-input">

      <div class="log-content">
        <div class="search-factor">
          <div class="search-item">
            <label class="search-name">工作流名称：</label>
            <Input
              search
              class="search-input"
              v-model="searchOptions.pipelineName"
              @on-search="searchPipeline"
              placeholder="请输入工作流名称"
            />
          </div>

          <div class="search-item">
            <label class="search-name">结束时间范围：</label>
            <div class="search-input">
              <DatePicker
                @on-ok="search"
                type="datetime"
                v-model="searchOptions.pipelineJobSt"
                placeholder="请选择"
              ></DatePicker>
            </div>
            <div class="search-input">
              <DatePicker
                @on-ok="search"
                type="datetime"
                v-model="searchOptions.pipelineJobFt"
                placeholder="请选择"
              ></DatePicker>
            </div>
          </div>

          <div class="search-item">
            <span>状态：</span>
            <RadioGroup v-model="searchOptions.pipelineJobStatus" @on-change="search">
              <Radio label="ALL">全部</Radio>
              <Radio label="SUCCESS">成功</Radio>
              <Radio label="FAIL">失败</Radio>
              <Radio label="RUNNING">进行中</Radio>
            </RadioGroup>
          </div>
        </div>
        <div class="log-table">
          <Table  :columns="taskColumns" :data="pipelineTaskLog">
            <template slot-scope="{ row }" slot="pipelineJobSt">
              <span>{{formatDateByStringMatch(row.pipelineJobSt, 'yyyy-MM-dd HH:mm:ss')}}</span>
            </template>
            <template slot-scope="{ row }" slot="pipelineJobFt">
              <span>{{formatDateByStringMatch(row.pipelineJobFt, 'yyyy-MM-dd HH:mm:ss')}}</span>
            </template>
            <template slot-scope="{ row }" slot="status">
              <span>{{translateStatus(row.pipelineJobStatus)}}</span>
            </template>
            <template slot-scope="{ row }" slot="action">
              <span
                v-if="row.pipelineJobStatus!=='RUNNING'"
                @click="viewLogDetails(row)"
                class="table-blue"
              >查看</span>
            </template>
          </Table>
        </div>
        <Page
          v-if="pagination.total > pagination.pageSize || pagination.total > 10"
          @on-change="changePageNum"
          @on-page-size-change="changePageSize"
          :total="pagination.total"
          :current="pagination.current"
          :page-size="pagination.pageSize"
          transfer
          show-sizer
          show-total
        />
      </div>
    </div>
    <div v-if="logDetailsShow">
      <log-details
        :pipelineJobId="pipelineJobId"
        :icon="icon"
        :pipelineJobName="pipelineJobName"
        v-on:back="back"
      ></log-details>
    </div>
  </div>
</template>

<script>
import { pipelineJobs } from 'http/api/pipeline';
import { mapState } from 'vuex';
import { formatDateByStringMatch } from 'assets/scripts/common';
import { defaultIcon } from 'assets/scripts/code';
import LogDetails from './LogDetails';

export default {
  name: 'BuildRecord',
  components: {
    LogDetails
  },
  data () {
    return {
      defaultIcon: defaultIcon,
      nameOptions: [],
      taskColumns: [
        {
          title: '工作流名称',
          key: 'pipelineName',
          tooltip: true,
          ellipsis: true
        },
        {
          title: '开始时间',
          key: 'pipelineJobSt',
          slot: 'pipelineJobSt'
        },
        {
          title: '结束时间',
          key: 'pipelineJobFt',
          slot: 'pipelineJobFt'
        },
        {
          title: '状态',
          key: 'pipelineJobStatus',
          slot: 'status'
        },
        {
          title: '操作',
          slot: 'action'
        }
      ],
      pagination: {
        total: 5,
        current: 1,
        pageSize: 10
      },
      searchOptions: {
        pipelineName: '',
        pipelineJobSt: '',
        pipelineJobFt: '',
        pipelineJobStatus: 'ALL'
      },
      pipelineTaskLog: [],
      atlaName: '',
      icon: '',
      logDetailsShow: false,
      pipelineJobName: '',
      pipelineJobId: '',
      formatDateByStringMatch: formatDateByStringMatch
    };
  },
  computed: {
    ...mapState({
      // kgId: state => state.workflow.kgId,
      // kgName: state => state.workflow.KgName
    })
  },
  methods: {
    translateStatus (status) {
      let result = 'NA';
      if (status === 'RUNNING') {
        result = '进行中';
      } else if (status === 'SUCCESS') {
        result = '成功';
      } else if (status === 'FAIL') {
        result = '失败';
      }
      return result;
    },
    searchPipeline () {
      this.pagination.current = 1
      this.search()
    },
    search (pageChangeFlag) {
      if (!(pageChangeFlag === true)) {
        this.pagination.pageSize = 10
        this.pagination.current = 1
      }
      let startTime = '';
      let endTime = '';
      if (
        this.searchOptions.pipelineJobSt &&
        this.searchOptions.pipelineJobFt
      ) {
        startTime = Math.round(
          this.searchOptions.pipelineJobSt.getTime() / 1000
        ).toString();
        endTime = Math.round(
          this.searchOptions.pipelineJobFt.getTime() / 1000
        ).toString();
      }
      pipelineJobs({
        pipelineName: this.searchOptions.pipelineName,
        pipelineJobSt: startTime,
        pipelineJobFt: endTime,
        pipelineJobStatus: this.searchOptions.pipelineJobStatus,
        pipelineId: '',
        kgId: this.kgId,
        pageIndex: this.pagination.current,
        pageSize: this.pagination.pageSize
      }).then(res => {
        if (res) {
          this.pipelineTaskLog = res.data.pipelineJobDTOs;
          this.pagination.total = res.data.total;
        } else {
          this.pipelineTaskLog = [];
        }
      });
    },
    viewLogDetails (row) {
      this.logDetailsShow = true;
      this.pipelineJobId = row.pipelineJobId;
      this.pipelineJobName = row.pipelineName;
    },
    changePageNum (pageNum) {
      this.pagination.current = pageNum;
      this.search(true);
    },
    changePageSize (size) {
      this.pagination.pageSize = size;
      this.changePageNum(1);
    },
    back () {
      this.logDetailsShow = false;
    }
  },
  mounted () {
    let id = this.$route.query.id;
    this.kgId = id;
    this.search();
    // getAtlaName({
    //   id
    // }).then(res => {
    //   if (res) {
    //     this.atlaName = res.data.name;
    //     this.icon = res.data.icon;
    //   }
    // });
  }
};
</script>

<style rel="stylesheet/less"  scoped lang="less" >
@import "../../assets/theme/themeBlue.less";
@bg-color: #f0f2f5;
.page-model {
  background: @bg-color;
  overflow: auto;
  height: 100%;
  width: 100%;
  .header {
    padding: 0 25px 0;
    height: 60px;
    line-height: 60px;
    background: #fff;
    .img {
      width: 30px;
      height: 30px;
      margin: 0 10px;
      vertical-align: middle;
      position: relative;
      top: -3px;
    }
    .first-title {
      display: inline-block;
      vertical-align: middle;
      max-width: 300px;
    }
  }
  .log-content {
    margin-top: 20px;
    padding: 0 20px;
    .search-factor {
      .search-item {
        display: inline-block;
        margin-right: 7px;
        .search-input {
          display: inline-block;
          width: 200px;
        }
      }
    }

    .log-table {
      margin: 20px 0;
      .circle {
        display: block;
        width: 20px;
        height: 20px;
        border-radius: 10px;
        margin-left: 7px;
        background-color: red;
      }
      .circleBlue {
        background-color: blue;
      }
      .show-log {
        color: blue;
        cursor: pointer;
      }
    }
  }
}
</style>
